<template>
  <div>
    <h1>App</h1>
    <p>count:{{ $store.state.count }}</p>
    <p>count:{{ count }}</p>
    <p>num:{{ num }}</p>
  </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  name: 'App',
  mounted() {
    console.log(this, 'app');
    // mapState的使用，参数是一个数组，数组内是我们要去store拿的值
    // mapState返回一个对象，对象内部其实就是读取值的对应的计算属性的方法
    const result = mapState(['count', 'num']);
    console.log(result);

    // 在测试的时候，直接调用count方法，因为this不是指向组件实例，所以看不出来效果
    // 可以强制的把count方法中的this改为组件实例，可以看到结果
    console.log(result.count.apply(this));
  },
  // computed: {
  //   // 获取state中count的值
  //   count() {
  //     return this.$store.state.count;
  //   },
  //   num() {
  //     return this.$store.state.num;
  //   },
  // },

  computed: {
    ...mapState(['count', 'num']),
  },
};
</script>
<style></style>
